<template>
  <div class="ppmMain" style="padding: 0 40px;box-sizing: border-box">
    <div class="productDiv">
      <div class="pd_left">
        <label class="pdl_title">产品：</label>
        <label class="pdl_name">{{proTitle}}</label>
        <el-popover
          placement="bottom"
          trigger="click">
          <ul class="pro_item">
            <li @click="changePro(p)" v-for="p in productList" style="list-style: none">{{p}}</li>
          </ul>
          <el-button slot="reference" class="pro_change">切换</el-button>
        </el-popover>
      </div>
      <div class="pd_right">
        <el-date-picker
          v-model="monthDate"
          type="month"
          @change="getData"
          placeholder="选择日期">
        </el-date-picker>
      </div>
    </div>
    <div class="sky_main_box">
      <!--<h4 class="sky_ppm_detail_title">{{p_name}}  <span class="">/  {{child_name}}</span></h4>-->
      <div class="sky_pm_detail_box">
        <div v-if="main!=''" class="sky_ppm_header">
          <router-link tag="h3" class="sky_return" to="/index"><i class='sky-icon-return'></i>返回</router-link>
          <h3 v-if="main.name!=undefined" class="sky_incoming_title mainValue">
            {{main.name}}
          </h3>
          <h3 class="ppm_number_box mustRight">
            <div v-if="main.value!=undefined" :class="[
                {'font_color_down ppm_number':main.yty > 0 && main.up == 1},
                {'font_color_up ppm_number':main.yty < 0 && main.up == 1},
                {'font_color_down ppm_number':main.yty < 0 && main.up == 0},
                {'font_color_up ppm_number':main.yty > 0 && main.up == 0},
                {'font_color_pass ppm_number':main.yty==0},
              ]">{{main.value}}</div>
            <a class="ppm_standard">
              <i :class="[
                {'sky-icon-nordown':main.yty > 0 && main.up == 1},
                {'sky-icon-impdown':main.yty < 0 && main.up == 1},
                {'sky-icon-lessdown':main.yty < 0 && main.up == 0},
                {'sky-icon-impup':main.yty > 0 && main.up == 0},
                {'sky-icon-standard':main.yty == 0 && main.up == 1},
                {'sky-icon-standard':main.yty == 0 && main.up == 0},
              ]"></i>
              {{main.yty}}%  <span>同比标准</span>
            </a>
          </h3>
          <p class="sky_ppm_desc" v-html="main.desc">
          </p>
        </div>
        <div class="date_chart_box">
          <div class="sky_main_title">
            </div>
            <div id="myChart" style="height:400px;width:100%"></div>
        </div>
        <div class="sky_gc-chart">
          <div class="sky_main_title sky_fault">
            <h3 v-if="main!=''" class="sky_coming_title">{{main.name}}构成</h3>
          </div>
          <div v-show="showChart" id="mybar" style="height:400px;width:100%">
          </div>
          <div v-show="nodata" class="sky_nodata">
                暂无数据
          </div>
      </div>
        <div class="sky_chart_pie">
            <div class="sky_main_title">
                <h3 class="sky_fault_type">事故类型</h3>
                <h3 class="sky_fault_sum">{{sum}} <span>总计</span></h3>
            </div>
            <div id="mypie" style="height:400px;width:100%"></div>
        </div>
      </div>
      <div v-if="proposal.length>0" class="sky_ex_box">
        <div class="title">最新异常</div>
        <div class="sky_ex_table">
            <table>
              <tr>
                <th>产品</th>
                <th>发生时间 </th>
                <th>等级</th>
                <th>问题描述</th>
                <th>问题分类</th>
                <!--<th>结果</th>-->
                <th>责任人</th>
                <th>状态</th>
                <th>关闭时间</th>
                <th>指标类型</th>
                <th>8D</th>
              </tr>
              <tr v-for="p in proposal">
                <!--<router-link :to="'/layout/issue_bill/'+p.id" tag="td">{{p.data.product}}</router-link>-->
                <div style="cursor: pointer" @click="toDetail(p)">{{p.data.product}}</div>
                <div style="cursor: pointer" @click="toDetail(p)">{{p.createTime | changeTime}}</div>
                <div style="cursor: pointer" @click="toDetail(p)" :class="[{'red':p.data.level==1},{'org':p.data.level==2},{'yel':p.data.level==3},{'blue':p.data.level==4}]">
                    {{ p.data.level | changeLevel }}
                </div>
                <div style="cursor: pointer" @click="toDetail(p)">{{p.data.desc}}</div>
                <div style="cursor: pointer" @click="toDetail(p)">{{p.data.category}}</div>
                <div style="cursor: pointer" @click="toDetail(p)">{{p.creator}}</div>
                <div style="cursor: pointer" @click="toDetail(p)">
                  <span v-if="p.status=='open'">未解决</span>
                  <span v-if="p.status=='close'">已解决</span>
                  <span v-if="p.status=='stop'">暂停</span>
                </div>
                <div style="cursor: pointer" @click="toDetail(p)">{{p.updateTime | changeTime}}</div>
                <div style="cursor: pointer" @click="toDetail(p)">{{p.result}}</div>
                <div style="cursor: pointer" @click="toDetail(p)" v-if="p.data.edReport!=undefined" :to="'/layout/pro/'+p.data.edReportId">
                  {{p.data.edReport.stage}}
                </div>
              </tr>
            </table>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  import qs from 'qs'
 import {getPercent,trYty,getDays,getYearMonths,changeTime,changeLevel,getDay,getYearMonth} from '../../../util/filter'
 import {mapGetters,mapActions} from 'vuex'
 export default{
   data() {
     return {
       monthDate:'',
       oldMonthDate:'',
       pmDate:'',
       changesData:'',
       radio: '1',
       p_name:'',
       child_name:'',
       main:'',
       proposal:[],
       productList:[],
       flog:0,
       proTitle:'',
       sum:0,
       nodata:false,
       showChart:true,
       proTitle:'',
       productList:[],
     };
   },
   computed:{
     ...mapGetters([
       'protitle'
     ])
   },
   filters:{
     "changeTime":changeTime,
     "changeLevel":changeLevel
   },
   mounted(){
     let self = this
     if (self.protitle != undefined && self.protitle != ''){
       this.proTitle = self.protitle
     }
     if (this.$route.query.name!=''){
       var str=this.$route.query.name
       var index = str.indexOf('\-');
       this.p_name=str.substr(0,index);
       this.child_name = str.substr(index + 1,str.length);
       this.monthDate=this.$route.query.time;
       this.pmDate=this.$route.query.time;
       this.changesData=this.$route.query.time;
     }
     // this.getStructure();
     this.getDetailMain();
     this.getDayDetail();
     this.getDic();
     this.getData();
   },
   watch:{
     monthDate(newVal,oldVal){
       let self = this
       if (typeof newVal == 'object'){
         self.monthDate = getYearMonth(this.monthDate)
         self.oldMonthDate = oldVal
       }
     }
   },
   methods: {
     //获取首页数据
     getData(){
       let self = this
       // self.oldMonthDate = self.monthDate
       // if (typeof this.monthDate == 'object'){
       //   this.monthDate = getYearMonth(this.monthDate)
       // }
       if (self.protitle == ''|| self.protitle == undefined ){
         this.proTitle=this.productList[0]
       }else{
         this.proTitle = self.protitle;
       }
       let params={
         item:this.proTitle,
         month:this.monthDate
       }
       self.$http.get(self.conURL + 'pm/api/homepage/new?' + qs.stringify(params)).then(res => {
         this.oncePassRate=getPercent(res.data.oncePassRate.value);
         this.outPoint=getPercent(res.data.outPoint.value);
         this.planFinishRate=getPercent(res.data.planFinishRate.value);
         this.PPMS=res.data.ppm.value;
         this.fixRate=getPercent(res.data.fixRate.value);
         this.deviceTroubleTimes=getPercent(res.data.deviceTroubleTimes.value);
         this.supplyFailureTimes=getPercent(res.data.supplyFailureTimes.value);
         this.deviceGoodRate=getPercent(res.data.deviceGoodRate.value);
         this.oeeName=res.data.oee.name;
         this.oeeValue=res.data.oee.value;
         this.oee=res.data.oee
         this.oeeYty=res.data.oee.yty;
         this.oeeTarget=res.data.oee.target;
         let pmNumber=res.data.oee.data
         let ppmTick=[];
         let ppm=[];
         let dayPPm=[];
         let year=new Date().getFullYear();
         let month=new Date().getMonth()+1;
         let day= new Date().getDate();
         let index=0;
         let mydate=new Date(year+'-'+month+'-'+day)/1000;
         if (pmNumber.length>0){
           for (var i=0;i<pmNumber.length;i++){
             if (mydate==pmNumber[i].day){
               ppmTick.push('今日');
               index=i;
               dayPPm.push(Number(pmNumber[i].value))
             }else {
               ppmTick.push(getDays(pmNumber[i].day));
               dayPPm.push(Number(0))
             }
             ppm.push(Number(pmNumber[i].value) == '' ? '' : Number(pmNumber[i].value))
           }
           var maxNumber=parseInt(Math.max.apply(null,ppm));
           if (maxNumber<10){
             maxNumber =maxNumber+1;
           } else if(maxNumber>10 && maxNumber<100){
             maxNumber =100;
           }else{
             let number=parseInt(maxNumber/100);
             if (number<10){
               maxNumber=100*(number+2)
             }else{
               maxNumber=200*(number+2)
             }
           }
           this.getDetailMain();
           this.getDayDetail()
           this.getStructure()
           this.drawLine(ppmTick,ppm,dayPPm,maxNumber,index);
         }
         this.c = res.data
       }).catch(error=>{
         // console.log(oldDate,123);
         this.$notify({
           title: '警告',
           message: '未找到' + self.monthDate + '的相关数据',
           type: 'warning'
         });
         this.monthDate = self.oldMonthDate
         this.getDetailMain();
         this.getDayDetail();
         this.getDic();
         this.getData();
       });
     },
     drawLine(ppmTick,ppm,dayPPm,maxNumber,index){
       let myChart = this.$echarts.init(document.getElementById('myChart'));
       var colors = ['#5793f3', '#d14a61', '#675bba','#fff'];
       myChart.setOption({
         color: colors,
         grid: {
           right: '3%',
           left:'5%',
           borderWidth:0,
           show:false
         },
         legend: {
         },
         dataZoom: {
           show: true,
           realtime: true,
           y:390,
           height:40,
           start: 60,
           end: 100,
         },
         xAxis: [
           {
             type: 'category',
             boundaryGap: false,
             axisTick: {
               alignWithLabel: false
             },
             data: ppmTick,
             axisTick: {
               show: false
             },
             axisLine: {
               show: false
             },
             axisLabel : {
               textStyle: {
                 color: '#999cb1',
                 fontSize:16
               }
             }
           }
         ],
         yAxis: [
           {
             type: 'value',
             axisLine: {
               show:false,
               lineStyle: {
                 color: colors[3],
                 fontSize:16
               }
             },
             axisTick: {
               show: false
             }
           },
           {
             type: 'value',
             // max:maxNumber,
             max: 150,
             min:0,
             position:"left",
             offset:15,
             boundaryGap: false,
             axisTick: {
               show: false
             },
             axisLine: {
               show: false
             },
             axisLine: {
               show:false,
               lineStyle: {
                 color:'#999cb1',
                 fontSize:16
               }
             },
           },
         ],
         series: [
           {
             type:'line',
             label: {
               normal: {
                 show: false
               }
             },
             barWidth:30,
             yAxisIndex:1,
             symbol:'none',
             smooth:true,
             itemStyle: {
               normal: {
                 color: new this.$echarts.graphic.LinearGradient(
                   0, 0, 0, 1,
                   [
                     {offset: 1, color: '#c9e3ff'},
                     {offset: 0.5, color: '#deeeff'},
                     {offset:0 , color: '#f8fbff'}
                   ]
                 )
               }
             },
             data:dayPPm
           },
           {
             type:'line',
             yAxisIndex:1,
             symbol: 'emptyCircle',
             /**
              * 该段莫名会导致线段段落出错，目的不明，暂时屏蔽
              * **/
             // symbolSize:function (value,params) {
             //   if (params.dataIndex==index){
             //     return 6
             //   }else{
             //     return 0
             //   }
             //   if (value==maxNumber){
             //     return 6
             //   }else{
             //     return 0
             //   }
             // },
             label: {
               normal: {
                 show: false
               }
             },
             data: ppm,
             markPoint: {
               symbol: 'rect',
               symbolSize:[54, 25],
               symbolOffset:[0,'-75%'],
               itemStyle:{
                 color:'#fff',
               },
               label:{
                 fontSize:14,
                 padding:8,
                 borderRadius:3,
                 color:'#fff',
                 backgroundColor:'#3384dd'
               },
               data: [
                 // {type: 'max', name: '最大值'}
               ],
             }
           }
         ]
       })
       myChart.resize();
     },
     drawBar(days,series,name){
       let mybar = this.$echarts.init(document.getElementById('mybar'));
       mybar.setOption({
         legend: {
           data:name,
           left:'right',
           padding:[0,30,0,0]
         },
         grid: {
           left: '4%',
           right: '4%',
           bottom: '6%',
           containLabel: true
         },
         dataZoom: {
           show: true,
           realtime: true,
           y:390,
           height:40,
           start: 60,
           end: 100,
         },
         xAxis : [{
           type : 'category',
           data : days,
           axisTick: {
             show: false, //取消刻度
           },
           axisLine: {
             show: false,
           },
           axisLabel:{
             interval:0,
             margin:20,
             textStyle: {
               align:'center',
               baseline:'middle'
             }
           },
         }
         ],
         yAxis : [
           {
             type : 'value',
             axisTick: {
               show: false, //取消刻度
             },
             axisLine: {
               show: false,
             }
           }
         ],
         barWidth:15,
         series:series,
       })
       mybar.resize();
     },
     drawPie(pie){
       let mypie = this.$echarts.init(document.getElementById('mypie'));
       mypie.setOption({
         series : [
           {
             name: '访问来源',
             type: 'pie',
             radius :['15%','60%'],
             center: ['49%', '48%'],
             data:pie,
             itemStyle: {
               normal:{
                 label:{
                   fontSize:16,
                   show:true,
                   formatter:function(val){
                     return val.name.split("、").join("\n").split("-").join("\n");
                   }
                 },
                 labelLine:{
                   show:true
                 }
               },
               emphasis: {
                 shadowBlur: 10,
                 shadowOffsetX: 0,
                 shadowColor: 'rgba(0, 0, 0, 0.5)'
               }
             }
           }
         ]
       })
       mypie.resize();
     },
     getStructure(){
       // let month=this.pmDate;
       let self = this
       let month=this.monthDate;
       let target=this.$route.query.item;
       let params={
           month:month,
           target:target
       }
       if (this.proTitle!=''&& this.proTitle!='全部'){
         params['item']=this.proTitle;
       }
       self.$http.get(self.conURL + 'pm/api/detail/structure?' + qs.stringify(params)).then(res => {
         let data=res.data.days;
         let dayList=[];
         for (var i=0;i<data.length;i++){
           dayList.push(getDays(data[i]));
         }
         let serieList=[];
         var name=[];
         let colorList=['#3384dd','#26c6d9','#fb9440'];
         if (res.data.dim.length>0){
           for (var i=0;i<res.data.dim.length;i++){
             var dim={};
             dim["type"]="bar";
             let datas=[];
             for (var j=0;j<res.data.dim[i].data.length;j++){
               if(res.data.dim[i].data[j]!==null && res.data.dim[i].data[j]>0){
                 datas.push(res.data.dim[i].data[j])
               }else{
                 datas.push('');
               }
             }
             dim["data"]=datas;
             dim["name"]=res.data.dim[i].name;
             dim["barGap"]='50%'
             dim["itemStyle"]={
               normal:{
                 color:colorList[i],
                 label : {show: true, position: 'top'}
               }
             }
             name.push(res.data.dim[i].name);
             serieList.push(dim);
           }
           if (serieList.length>0){
             this.nodata=false;
             this.showChart=true;
             this.drawBar(dayList,serieList,name);
           }
         }

       }).catch(error=>{
         this.nodata=true;
         this.showChart=false;
         console.log(error);
       });
     },
     getDetailMain(){
       let self = this
       // let month=this.pmDate;
       let month=this.monthDate;
       let target=this.$route.query.item;
       let params={
         month:month,
         target:target
       }
       if (this.proTitle!='' && this.proTitle!='全部'){
         params['item']=this.proTitle;
       }
       if (month != '2018-11') {
         if (params.item == 'CD539A' || params.item == 'CD539B') {
           params.item = 'CD539'
           self.proTitle = 'CD539'
         }
       }
       self.$http.get(self.conURL + 'pm/api/detail?' + qs.stringify(params)).then(res => {
         let pieData=[];
         let type=res.data.type;
         this.main=res.data.data;
         this.proposal=res.data.proposal;
         let num=0;
         let color=['#8b9bfa','#ffcc40','#f87b44','#2cc2ed','#378bf4']
         if (type.length>0){
           for(var i=0;i<type.length;i++){
             var pie={};
             pie["value"]=type[i].value;
             pie["name"]=type[i].name+'-   '+type[i].value;
             num+=parseInt(type[i].value);
             if(i>color.length){
               pie["itemStyle"]={
                 normal:{
                   color:color[i-color.length]
                 }
               }
             }else if(i%color.length==0){
               pie["itemStyle"]={
                 normal:{
                   color:'#85c227'
                 }
               }
             }else{
               pie["itemStyle"]={
                 normal:{
                   color:color[i]
                 }
               }
             }
             pieData.push(pie);
           }
         }else{
           var pie={
             name:'暂无',
             value:[0],
             itemStyle:{
               normal:{
                 color:'#ffcc40'
               }
             }
           };
           pieData.push(pie);
         }
         this.sum=num;
         this.drawPie(pieData);
         for (let i = 0; i < this.proposal.length; i++){
           if (this.proposal[i].data.desc != undefined){
             var oldVal = this.proposal[i].data.desc.replace(/<\/?.+?>/g,"");
             this.proposal[i].data.desc = oldVal.replace(/ /g,"");
           }
         }
       }).catch(error=>{
         console.log(error);
       });
     },
     getDayDetail(){
       let self = this
       let target=this.$route.query.item;
       let month=this.monthDate;
       let params={
         month:month,
         target:target
       }
       if (this.proTitle!=''&& this.proTitle!='全部'){
         params['item']=this.proTitle;
       }
       self.$http.get(self.conURL + 'pm/api/detail/day/new?' + qs.stringify(params)).then(res => {
         let ppmTick=[];
         let ppm=[];
         let dayPPm=[];
         let year=new Date().getFullYear();
         let month=new Date().getMonth()+1;
         let day= new Date().getDate()
         let index=0;
         let mydate=new Date(year+'-'+month+'-'+day)/1000;
         if (res.data.data.length>0){
           for (var i=0;i<res.data.data.length;i++){
             if (mydate==res.data[i].day){
               ppmTick.push('今日');
               index=i;
               dayPPm.push(Number(res.data[i].value))
             }else {
               ppmTick.push(getDay(res.data[i].day));
               dayPPm.push(Number(0))
             }
             if (res.data[i].value!='' && res.data[i].value!=null){
               ppm.push(Number(res.data[i].value))
             }else{
               ppm.push('')
             }

           }
           var maxNumber=Math.ceil(Math.max.apply(null,ppm));
           if (maxNumber<=10){
             maxNumber;
           } else if(maxNumber>10 && maxNumber<=100){
             maxNumber =100;
           }else{
             let number=parseInt(maxNumber/100);
             if (number<10){
               maxNumber=100*(number+2)
             }else{
               maxNumber=200*(number+2)
             }
           }
           // console.log(ppm,'ppm2')
           this.drawLine(ppmTick,ppm,dayPPm,maxNumber,index);
         }
       }).catch(error=>{
         // console.log(error,123);
       })
     },
     getDic(){
       let self = this
       self.$http.get(self.conURL + 'mongo/api/docs/dictitem/product').then(res => {
         for(var i=0;i<res.data.length;i++){
           this.productList.push(res.data[i]);
         }
         if (self.protitle == '' || self.protitle == undefined ){
           this.proTitle=res.data[0]
         }else{
           this.proTitle = self.protitle
         }
       }).catch(error=>{
         console.log(error);
       });
     },
     changePro(item,index){
       this.flog=index;
       this.proTitle=item;
       this.getDetailMain();
       this.getStructure();
     },
     toDetail(p){
       // console.log(p)
       this.$router.push({
         path:'/index/questionContent',
         query:p
       })
     }
   },
 }
</script>
<style lang="less">
  .ppmMain{
    h3{
      margin-top: 0;
      margin-bottom: 0;
    }
    .productDiv{
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      width: 100%;
      height: 140px;
      .pd_left{
        display: flex;
        flex-direction: row;
        span{
          display: flex;
          flex-direction: column;
          justify-content: center;
        }
        .pdl_title{
          color: #848484;
          line-height: 140px;
          font-size: 28px;
        }
        .pdl_name{
          color: #3b3b3b;
          line-height: 140px;
          font-size: 28px;
          margin-right: 20px;
        }
        .pro_change{
          width: 54px;
          height: 26px;
          line-height: 26px;
          text-align: center;
          font-size: 14px;
          color: #ffffff;
          background: #3384dd;
          border-radius: 50px;
          padding: 0;
          margin-top: auto;
          margin-bottom: auto;
        }
      }
      .pd_right{
        display: flex;
        flex-direction: column;
        justify-content: center;
        .el-input__inner{
          padding-left: 20px;
          background-color: #e5e5e5;
          color: #636363;
          border-radius: 30px;
          border: 0px;
          font-size: 18px;
        }
        .el-input__prefix{
          display: none;
        }
      }
    }
    .font_color_up{
      color: #fd5b40 !important;
    }
    .font_color_pass{
      color: #3384dd !important;
    }
    .font_color_down{
      color: #4eb240 !important;
    }
    .sky_main_box{
      display: flex;
      flex-direction: column;
      padding-left: 0;
      padding-right: 0;
      .sky_pm_detail_box{
        background: #fff;
        .sky_ppm_header{
          display: flex;
          flex-direction: column;
          margin: 0px 24px;
          .sky_return{
            font-size: 20px;
            font-weight: 500;
            line-height: 48px;
            cursor: pointer;
            color: #222;
            margin: 0;
            margin-top: 18px;
            [class^="sky-icon"]{
              width: 30px;
              height: 30px;
              background: url(../../../assets/imgs/1-2.png) no-repeat;
              display: inline-block;
              vertical-align: middle;
              margin: 0px 3px 0px;
            }
            .sky-icon-return{
              background-position: -64px -277px;
            }
          }
          .sky_incoming_title{
            color: #333;
            font-size: 26px;
            font-weight: 500;
            line-height: 60px;
            margin: 0;
          }
          .ppm_number_box{
            display: flex;
            flex-direction: row;
            font-weight: 500;
            margin: 0;
            .ppm_number{
              font-size: 57px;
              font-weight: 500;
            }
            .ppm_standard{
              color: #999;
              font-size: 24px;
              font-weight: 500;
              line-height: 54px;
              [class^="sky-icon"]{
                width: 30px;
                height: 30px;
                background: url(../../../assets/imgs/1-2.png) no-repeat;
                display: inline-block;
                vertical-align: middle;
                margin: 0px 3px 0px;
              }
              .sky-icon-standard{
                background-position: -61px -239px;
                width: 20px;
              }
              .sky-icon-impdown{
                background-position: -63px -62px;
                width: 15px;
              }
              .sky-icon-whitedown{
                background-position: -63px -101px;
                width: 15px;
              }
              .sky-icon-lessdown{
                background-position: -63px -144px;
                width: 15px;
              }
              .sky-icon-impup{
                background-position: -111px -192px;
                width: 15px;
              }
            }
          }
          .mustRight{
            flex-direction: row !important;
          }
          .sky_ppm_desc{
            color: #666;
            font-size: 16px;
            letter-spacing: 2px;
            line-height: 27px;
            margin: 0;
            margin-top: 18px;
          }
        }
        .date_chart_box{
          display: inline-block;
          position: relative;
          border-bottom: 1px solid #e7e7e7;
          width: 100%;
        }
        .sky_gc-chart{
          float: left;
          display: inline-block;
          border-right: 1px solid #e7e7e7;
          padding: 0px;
          border: 0px;
          width: 65%;
          .sky_main_title{
            padding: 30px;
            .sky_coming_title{
              font-size: 18px;
              color: #333;
              font-weight: 500;
            }
          }
        }
        .sky_chart_pie{
          float: left;
          display: inline-block;
          width: 34%;
          float: right;
          border-left: 1px solid #e5e5e5;
          .sky_fault_type{
            color: #333;
            line-height: 48px;
            font-size: 20px;
            text-indent: 30px;
            margin-top: 20px;
            font-weight: 500;
          }
          .sky_fault_sum{
            font-size: 30px;
            text-indent: 30px;
            color: #3384dd;
            line-height: 40px;
            font-weight: 400;
          }
        }
      }
      .sky_ex_box{
        background: #fff;
        border: 1px solid #e7e7e7;
        border-radius: 3px;
        margin-top: 20px;
        background: #fff;
        margin-bottom: 50px;
        .title{
          display: block;
          color: #333;
          font-size: 20px;
          text-indent: 20px;
          line-height: 40px;
          border-bottom: 1px solid #e7e7e7;
        }
        table{
          color: #666;
          display: inline-block;
          width: 100%;
          tr{
            border-bottom: 1px solid #e7e7e7;
            line-height: 35px;
            padding: 0px 20px;
            width: 100%;
            display: inline-block;
            th{
              text-align: left;
              display: inline-block;
              width: 7%;
              padding: 0px 5px;
            }
            div{
              text-align: left;
              display: inline-block;
              width: 7%;
              overflow: hidden;
              padding: 0px 5px;
              text-overflow: ellipsis;
              -moz-text-overflow: ellipsis;
              white-space: nowrap;
            }
          }
          tr:nth-child(1){
            background-color: #fafafa;
          }
        }
      }
    }
  }
</style>
